﻿@{
    var categoryLink = Url.RouteUrl("Category");
    var productLink = Url.RouteUrl("Product");
}
<b-modal id="ModalQuickView" ref="ModalQuickView" :dark-theme="darkMode" @@shown="initReservationQV(), QuickViewShown()" size="xl" centered hide-footer hide-header>
<template v-if="PopupQuickViewVueModal !== null">
<form method="post" id="product-details-form" :action="'/' + PopupQuickViewVueModal.SeName">
<div itemscope itemtype="http://schema.org/Product" :data-productid="PopupQuickViewVueModal.Id">
<div class="quick-view">
<div class="col-12 px-0">
<div class="form-row">
<div class="col-lg-5 col-12">
    <div v-if="PopupQuickViewVueModal.PictureModels.length > 1" class="product-gallery">
        <swiper ref="QuickViewSlider"
                :options="QuickViewSlider.swiperOptions">
            <swiper-slide class="slide-wide" v-for="picture in PopupQuickViewVueModal.PictureModels">
                <img class="img-fluid" :src="picture.ImageUrl" :data-srcs="picture.ImageUrl" :alt="picture.AlternateText" :title="picture.Title"/>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <swiper ref="QuickViewSliderThumbs"
                :options="QuickViewSliderThumbs.swiperOptions"
                class="thumbs">
            <swiper-slide class="slide-wide" v-for="(picture, index) in PopupQuickViewVueModal.PictureModels">
                <img @@click="vm.slideTo($event.target)" :data-index="index" class="img-thumb" :src="picture.ThumbImageUrl" :alt="picture.AlternateText" :title="picture.Title" :data-img="picture.ImageUrl"/>
            </swiper-slide>
        </swiper>
    </div>
    <div v-else class="product-picture">
        <img :src="PopupQuickViewVueModal.DefaultPictureModel.ImageUrl" :alt="PopupQuickViewVueModal.DefaultPictureModel.AlternateText" :title="PopupQuickViewVueModal.DefaultPictureModel.Title" class="img-fluid" id="main_qv_img"/>
    </div>
</div>
<div class="col-lg-7 col-12">
<div class="quick-view-overview">
<template v-if="PopupQuickViewVueModal.Breadcrumb.Enabled">
    <div class="container px-0">
        <ol class="breadcrumb pt-0 mb-3" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
            <li class="breadcrumb-item" itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem">
                <a href="@Url.RouteUrl("HomePage")" target="_self">
                    <b-icon icon="house-door" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
                    <span itemprop="name">@Loc["Products.Breadcrumb.Top"]</span>
                    <span itemprop="item" itemscope itemtype="http://schema.org/Thing"
                          id="@Url.RouteUrl("HomePage")">
                    </span>
                    <meta itemprop="position" content="1"/>
                </a>
            </li>
            <template v-for="(category, index) in PopupQuickViewVueModal.Breadcrumb.CategoryBreadcrumb">
                <li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem" class="breadcrumb-item">
                    <a :href="category.SeName" target="_self">
                        <span itemprop="name">{{category.Name}}</span>
                        <span itemprop="item" itemscope itemtype="http://schema.org/Thing"
                              :id="category.SeName">
                        </span>
                        <meta itemprop="position" :content="index + 2"/>
                    </a>
                </li>
            </template>
            <li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem" class="breadcrumb-item active">
                <strong class="current-item" itemprop="name">{{PopupQuickViewVueModal.Breadcrumb.ProductName}}</strong>
                <span itemprop="item" itemscope itemtype="http://schema.org/Thing"
                      :id="'@productLink' + PopupQuickViewVueModal.SeName">
                </span>
                <meta itemprop="position" content="2"/>
            </li>
        </ol>
    </div>
</template>
<h2 class="qv-title">
    <a :href="'@productLink' + PopupQuickViewVueModal.SeName">
        {{PopupQuickViewVueModal.Name}}
    </a>
</h2>
<template v-if="PopupQuickViewVueModal.ProductReviewOverview.AllowCustomerReviews">
    <div class="d-inline-flex align-items-center">
        <b-form-rating :id="'rating-inline-overview-' + PopupQuickViewVueModal.Id" class="p-0" variant="warning" no-border size="sm" show-value precision="2" readonly inline :value="PopupQuickViewVueModal.ProductReviewOverview.RatingSum / PopupQuickViewVueModal.ProductReviewOverview.TotalReviews"></b-form-rating>
        <span class="review-count">{{PopupQuickViewVueModal.ProductReviewOverview.TotalReviews}} @Loc["Reviews.Overview.Reviews"]</span>
    </div>
</template>
<a class="modal-close" @@click="$bvModal.hide('ModalQuickView')">
    <b-icon icon="x"></b-icon>
</a>
<template>
    <div class="accordion" role="tablist">
        <div role="tab">
            <a v-b-toggle.accordion-qv-details class="btn btn-light collapse-button">
                <span class="icons icon-info"></span>
                <span>@Loc["products.details"]</span>
                <b-icon icon="chevron-double-down"></b-icon>
            </a>
        </div>
        <b-collapse class="collapse-panel" visible id="accordion-qv-details" accordion="accordion-qv-details" role="tabpanel">
            <template v-if="PopupQuickViewVueModal.StockAvailability !== ''">
                <div class="stock mb-3">
                    <label class="label col-form-label">@Loc["Products.Availability"]:</label>
                    <span class="value" :id="'stock-availability-value-' + PopupQuickViewVueModal.Id">
                        <link itemprop="availability" href="http://schema.org/InStock"/>
                        <template v-if="PopupQuickViewVueModal.StockAvailability !== ''">
                            {{PopupQuickViewVueModal.StockAvailability}}
                        </template>
                        <template v-else-if="PopupQuickViewVueModal.DisplayDiscontinuedMessage">
                            @Loc["Products.Discontinued"]
                        </template>
                    </span>
                </div>
            </template>
            @* PRODUCT BUNDLES *@
            <partial name="Partials/QuickView/ProductBundles"/>
            @* ATTRIBUTES *@
            <partial name="Partials/QuickView/Attributes"/>
            <template v-if="PopupQuickViewVueModal.ProductAttributes.length > 0">
                <div class="attributes">
                    <table class="table">
                        <template v-for="(attribute, index) in PopupQuickViewVueModal.ProductAttributes">
                            <product-attribute-quickview :ref="'QVattribute' + index" :attribute="attribute"></product-attribute-quickview>
                        </template>
                    </table>
                </div>
            </template>
            <script asp-location="Footer" asp-order="302">
                                       Vue.component('product-attribute-quickview', {
                                           template: '#product-attribute-quickview',
                                           props: {
                                               attribute: null
                                           }
                                       });
                                    </script>
            @* WAREHOUSES *@
            <partial name="Partials/QuickView/Warehouses"/>
            @* RESERVATIONS *@
            <partial name="Partials/QuickView/ReservationInfo"/>
            @* GIFT VOUCHERS *@
            <partial name="Partials/QuickView/GiftVoucherInfo"/>
            @* PRICES *@
            <partial name="Partials/QuickView/Prices"/>
            @* AUCTION *@
            <partial name="Partials/QuickView/AuctionInfo"/>
            @* ADD TO CART *@
            <template v-if="PopupQuickViewVueModal.ProductType !== 10">
                <partial name="Partials/QuickView/AddToCart"/>
                <template v-if="(!PopupQuickViewVueModal.AddToCart.DisableWishlistButton || PopupQuickViewVueModal.CompareProductsEnabled || PopupQuickViewVueModal.EmailAFriendEnabled) && PopupQuickViewVueModal.AddToCart.UpdatedShoppingCartItemId == null">
                    <div class="btn-group mt-2 mb-3 w-100">
                        <partial name="Partials/QuickView/AddToWishlist"/>
                        <partial name="Partials/QuickView/ProductsComparison"/>
                    </div>
                </template>
            </template>
            @* END OF ADD TO CART *@
        </b-collapse>
        <template v-if="PopupQuickViewVueModal.ProductSpecifications.length !== 0">
            <div role="tab">
                <a v-b-toggle.accordion-qv-spec class="btn btn-light collapse-button">
                    <span class="icons icon-speedometer"></span>
                    <span>@Loc["Products.Specs"]</span>
                    <b-icon icon="chevron-double-down"></b-icon>
                </a>
            </div>
            <b-collapse class="collapse-panel" id="accordion-qv-spec" accordion="accordion-qv-spec" role="tabpanel">
                <div class="spec-container table-responsive">
                    <table class="table data-table border-bottom-0">
                        <colgroup>
                            <col/>
                            <col/>
                        </colgroup>
                        <tbody>
                        <template v-for="item in PopupQuickViewVueModal.ProductSpecifications">
                            <tr class="spec">
                                <td class="border-bottom border-top-0">
                                    <div class="spec-name">
                                        {{item.SpecificationAttributeName}}
                                    </div>
                                </td>
                                <td class="border-bottom border-top-0">
                                    <div class="spec-value d-inline-flex w-100">
                                        <template v-if="item.ColorSquaresRgb !== null">
                                            <div class="color-squares mb-2 mr-2">
                                                <span class="color-container" :title="item.ValueRaw">
                                                    <span class="color" v-bind:style="'background-color:' + item.ValueRaw">&nbsp;</span>
                                                </span>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="mb-2 mr-2" v-html="item.ValueRaw"></div>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
            </b-collapse>
        </template>
        <template v-if="PopupQuickViewVueModal.ShortDescription !== null">
            <div role="tab">
                <a v-b-toggle.accordion-qv-desc class="btn btn-light collapse-button">
                    <span class="icons icon-book-open"></span>
                    <span>@Loc["Products.description"]</span>
                    <b-icon icon="chevron-double-down"></b-icon>
                </a>
            </div>
            <b-collapse visible class="collapse-panel" id="accordion-qv-desc" accordion="accordion-qv-desc" role="tabpanel">
                <div class="qv-description" v-html="PopupQuickViewVueModal.ShortDescription"></div>
            </b-collapse>
        </template>
        @* ASSOCIATED PRODUCTS *@
        <template v-if="PopupQuickViewVueModal.ProductType == 10">
            <div role="tab">
                <a v-b-toggle.accordion-qv-group class="btn btn-light collapse-button">
                    <span class="icons icon-list"></span>
                    <span>@Loc["admin.catalog.products.associatedproducts"]</span>
                    <b-icon icon="chevron-double-down"></b-icon>
                </a>
            </div>
            <b-collapse visible class="collapse-panel" id="accordion-qv-group" accordion="accordion-qv-group" role="tabpanel">
                <template v-if="PopupQuickViewVueModal.AssociatedProducts.length > 0">
                    <template v-for="variant in PopupQuickViewVueModal.AssociatedProducts">
                        <div class="card overflow-hidden associatedItem mb-3">
                            <div class="row" no-gutters>
                                <div class="col-lg-3 col-md-4">
                                    <img :id="'main-product-img-' + variant.Id" :alt="variant.DefaultPictureModel.AlternateText" :src="variant.DefaultPictureModel.ImageUrl" class="rounded-0 img-fluid">
                                </div>
                                <div class="col-lg-9 col-md-8">
                                    <div class="card-body overview" :title="variant.Name">
                                        <!--short description-->
                                        <div v-if="variant.ShortDescription !== null" class="short-description mb-3" v-html="variant.ShortDescription"></div>
                                        <!--availability-->
                                        <template v-if="variant.StockAvailability !== null">
                                            <div class="stock">
                                                <label class="col-form-label">@Loc["Products.Availability"]:</label>
                                                <span class="value" :id="'stock-availability-value-' + variant.Id">
                                                    <link itemprop="availability" href="http://schema.org/InStock"/>
                                                    {{variant.StockAvailability}}
                                                </span>
                                            </div>
                                        </template>
                                        <!--attributes-->
                                        <template v-if="variant.ProductAttributes.length > 0">
                                            <div class="attributes">
                                                <table class="table">
                                                    <template v-for="(attribute, index) in variant.ProductAttributes">
                                                        <product-attribute-quickview :attribute="attribute"></product-attribute-quickview>
                                                    </template>
                                                </table>
                                            </div>
                                        </template>
                                        <!--price & add to cart-->
                                        <partial name="Partials/QuickView/PricesGroup"/>
                                        <partial name="Partials/QuickView/AddToCartGroup"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </template>
                <template v-else>
                    <div class="no-associated-products alert alert-info">
                        @Loc["Products.NoAssociatedProducts"]
                    </div>
                </template>
            </b-collapse>
        </template>
        @* END OF ASSOCIATED PRODUCTS *@
    </div>
</template>
</div>
</div>
<partial name="Partials/QuickView/LinkedProducts"/>
</div>
</div>
</div>
</div>
</form>
</template>
</b-modal>